<template>
  <div class="analysis-page">
    <a-card title="域名分析中" style="width: 500px; margin: 0 auto; margin-top: 50px;">
      <a-icon name="loading" spin />
      <p>正在对域名 <strong>{{ domain }}</strong> 进行全面分析，请耐心等待。</p>

      <!-- 依次展示每一步 -->
      <div v-for="(step, index) in visibleSteps" :key="index" style="margin-top: 20px;">
        <p>{{ step.message }}</p>
        <a-progress
          v-if="index !== progressSteps.length - 1"
          :percent="Math.round(step.progress )"
          :status="getProgressStatus(index)"
          style="height: 24px;"
        />
        <a-progress
          v-else
          type="circle"
          :percent="Math.round(step.progress )"
          :status="getProgressStatus(index)"
          :size="80"
        />
      </div>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits, ref, onMounted, computed } from 'vue';

const props = defineProps({
  domain: {
    type: String,
    required: true
  }
});

const emits = defineEmits(['progress-complete']);

// 步骤定义：最后一个使用环形进度条
const progressSteps = ref([
  { message: '正在获取域名文本特征', progress: 0 },
  { message: '正在获取域名 DNS 解析信息', progress: 0 },
  { message: '正在查询网站信息', progress: 0 },
  { message: '正在进行预测', progress: 0, isCircle: true }
]);

const currentStepIndex = ref(0);

// 控制当前显示的步骤范围
const visibleSteps = computed(() => {
  return progressSteps.value.slice(0, currentStepIndex.value + 1);
});

const getProgressStatus = (index: number) => {
  if (index < currentStepIndex.value) return 'success';
  if (index > currentStepIndex.value) return 'normal';
  return 'active';
};

const updateProgress = () => {
  const step = progressSteps.value[currentStepIndex.value];
  const timer = setInterval(() => {
    if (step.progress < 1) {
      step.progress += 0.05;
      if (step.progress >= 1) {
        step.progress = 1;
      }
    } else {
      clearInterval(timer);
      // 进入下一步
      if (currentStepIndex.value < progressSteps.value.length - 1) {
        currentStepIndex.value++;
        setTimeout(() => updateProgress(), 300); // 延迟启动下一步
      } else {
        // 所有步骤完成后触发事件通知父组件
        emits('progress-complete');
      }
    }
  }, 200); // 每 200ms 增长
};

onMounted(() => {
  updateProgress();
});
</script>

<style scoped lang="less">
.analysis-page {
  text-align: center;
}

:deep(.arco-card) {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

:deep(.arco-card-head) {
  background-color: #f5f5f5;
  border-bottom: 1px solid #e8e8e8;
}

:deep(.arco-card-body) {
  padding: 20px;
}

:deep(.arco-progress) {
  margin-top: 10px;
  height: 24px;
  border-radius: 4px;
}

:deep(.arco-progress-track) {
  height: 24px;
  border-radius: 4px;
}

:deep(.arco-progress-fill) {
  height: 24px;
  border-radius: 4px;
}

:deep(.arco-progress-text) {
  line-height: 24px;
  font-size: 12px;
}
</style>